<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>个人中心</title>
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/Homepage.css">
    	
    <link rel="stylesheet" type="text/css" href="css/StyleForInfoPage.css"/>
    
</head>

<body>
    <div class="navbar">
        <input type="checkbox" id="checkbox">
        <label for="checkbox" class="titleLabel">
            <i class="fa fa-bars" aria-hidden="true">
            	&nbsp;&nbsp;个人中心
            </i>
        </label>
        <ul>
            <div id="icon">
	    		<li>
		            <img :src="user.icon" alt="">
		            <span>欢迎您！{{user.nickname}}</span>
		        </li>
	    	</div>
            <li>
                <a href="User-bubble-Homepage.html">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <span>首页</span>
                </a>
            </li>
            <li>
	            <a href="User-HotAd-Page.html">
	                <i class="fa fa-thumbs-up" aria-hidden="true"></i>
	                <span>本月热门</span>
	            </a>
	        </li>
            <li>
                <a href="#">
                    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                    <span>个人中心</span>
                </a>
            </li>
            <li>
                <a href="User-Buy-Page.html">
                    <i class="fa fa-shopping-bag" aria-hidden="true"></i>
                    <span>购买广告</span>
                </a>
            </li>
            <li>
                <a href="User-Chat-Page.html">
                    <i class="fa fa-comments" aria-hidden="true"></i>
                    <span>客服中心</span>
                </a>
            </li>
            <li>
                <a href="javascript:void(0)" onclick="Logout()">
                    <i class="fa fa-sign-out" aria-hidden="true" style="transform: rotate(180deg);"></i>
                    <span>退出登录</span>
                </a>
            </li>
        </ul>
        
        <div id="app" class="main_info" >
        	<div class="info-page">
	            <!--个人信息区-->
				<div>
					<table style="border: 0; color: #a262ad;">
					    <tr>
					        <td rowspan="5" style="">
	                        	<div style="width: 200px; height: 200px;" onclick="document.getElementById('iconUpload').click()">
	                        		<form action="User?type=icon" method="post" enctype="multipart/form-data">
	                        			<input type="file" id="iconUpload" name="icon" onchange="this.form.submit();" style="display: none;" accept="image/*" />
	                        			<!--<input type="submit" value=""/>-->
	                        		</form>
	                        		<img :src="user.icon" style="width: 100%; height: 100%; border-radius: 50%;" />
	                        	</div>
	                        </td>
					        <td style="width: 500px; height: 80px;"></td>
					    </tr>
					    <tr>
					    	<td style="width: 500px; height: 30px;"> 昵称：{{user.nickname}}</td>
					    </tr>
					    <tr>
					        <td style="width: 500px; height: 30px;"> 用户名：{{user.username}}</td>
					    </tr>
					    <tr>
					        <td style="width: 500px; height: 30px;"> 余额：{{user.money}} <a href="User-Charge-Page.html" style="color: #a262ad;font-weight: bold">充值</a></td>
					    </tr>
					    <tr>
					        <td style="width: 500px; height: 30px;"> 邮箱：{{user.email}}</td>
					    </tr>
					    
	
					</table>
				
				
				</div>
				
				<br /> <br />
			
				<!--名下拥有的广告-->
				<div>
					<!--工具栏-->
                    <div class="">
                        <button type="button" title="新增" onclick='location.href="User-Buy-Page.html"'><i class="fa fa-file-o"></i> 新增</button>
                        <button type="button" title="刷新" onclick="window.location.href='User-Info-Page.html'"><i class="fa fa-refresh"></i> 刷新</button>

                    	<input type="text" class="search-bar" placeholder="搜索广告ID" v-model="ad_id" v-on:focus="searchAdById">

                    </div>

                    <!--工具栏/-->
					
                    <!--数据列表-->
                    <table style="text-align: center;color:  #a262ad;" class="table">
                        <thead>
                        <tr >
                            <th style="width: 80px" class="">ID</th>
                            <th style="width: 240px" class="">品牌名称</th>
                            <th  style="width: 400px" class="">网站地址</th>
                            <th style="width: 300px" class="">企业名称</th>
                            <th style="width: 300px" class="">品牌描述</th>
                            <th style="width: 120px" class="">状态</th>
                            <th style="width: 100px" class="">泡泡尺寸</th>
                            <th style="width: 100px" class="">操作</th>
                            </tr>
                        </thead>
                        <tbody>

                            <tr v-for="(ad,index) in ads" :key="index" :class="{ even: index % 2 === 0 }">
                                <td class="td">{{ad.ad_id}}</td>
                                <td class="td">{{ad.ad_brand_name}}</td>
                                <td class="td">{{ad.ad_website}}</td>

                                <td class="td">{{ad.ad_company_name}}</td>
                                <td class="td">{{ad.ad_description}}</td>
								<td class="td">
									<span v-if="ad.ad_status == 1">启用</span>
									<span v-else-if="ad.ad_status == 0">停用</span>
									<span style="color: red;" v-else>获取失败</span>
									
								</td>
								
                                <td class="td">{{ad.ad_size}}</td>
                                
                                <td class="td">
                                    <button type="button" @click="editAdInfo(ad.ad_id)"><i class="fa fa-edit"></i> 编辑</button>
                                	<button type="button" @click="delConfirm(ad.ad_id)"><i class="fa fa-trash-o"></i> 删除</button>

                                </td>
                            </tr>

                        </tbody>
                        <!--
                    <tfoot>
                    <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>CSS grade</th>
                    </tr>
                    </tfoot>-->
                    </table>
                    <!--数据列表/-->


	                <div style="width: 100%; height: 150px;">
	                	<!--空白-->
	                </div>
					
				</div>
			</div>
			
        </div>
    </div>
</body>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script src="js/GetInfo.js"></script>

<script>
	function Logout() {
		var flag = window.confirm("确定退出登录吗？");
		if (flag) {
			window.location.href = "AdInfo?type=logout";
		}
	};
	
	
	new Vue({
		el: "#app",
		data: {
			user: "",
			ads: [],
			ad_id: ""
		},
		methods: {
			getUserInfoById() {
				var _this = this;
				axios({
					method: "get",
					url: "User?type=user"
					
				}).then(function(resp){
					_this.user = resp.data;
				})
			},
			getAdsInfoById() {
				var _this = this;
				axios({
					method: "get",
					url: "AdInfo?type=ads"
					
				}).then(function(resp){
					_this.ads = resp.data;
				})
			},
            editAdInfo(ad_id) {
				url = "User-Edit-Page.html?ad_id=" + ad_id;
				window.location.href = url;
			},
			delConfirm(ad_id) {
				var flag = window.confirm("确定删除吗？");
				if (flag) {
					var _this = this;
					axios({
						method: "post",
						url: "AdInfo?type=del",
						data: "ad_id="+ad_id
					}).then(function(resp) {
						window.location.reload();
					})
				}
			},
			searchAdById() {
            	var _this = this;
            	
                document.addEventListener('keypress', function (ev) {
                    if (ev.keyCode == 13) {
                    	var ad_id = _this.ad_id;
                    	window.location.href = "User-Info-Page.html?ad_id="+ad_id;
                    }
                })
            }
			
		},
		mounted() {
			this.getUserInfoById();
			

			var url = window.location.search; //获取浏览器的地址值?id=1
        	var parame = url.split("="); //用=切割url地址栏的参数
            if (parame.length == 1) {
            	this.getAdsInfoById();
            } else {
            	var id = parame[1]; //获取到对应的参数值
            	var _this = this;
            	axios({
            		method: "post",
            		url: "AdInfo?type=search",
            		data: "ad_id="+id
            	}).then(function(resp) {
            		_this.ads = resp.data;
            		console.log(resp.data);
            	})
            }
		}
		
		
	})
	
</script>

<style>
    .even {
        /* 为偶数行定义样式 */
        background-color: #e3eeff;
    }
</style>

</html>